<template>
  <vxe-pulldown v-model="showPull" :transfer="true">
    <template #default>
      <VGroup>
        <el-input v-model="inputValue" placeholder="请输入" @clear="handleClear" @focus="close">
          <!-- 图标 -->
        </el-input>
        <div class="v-group-item bg-[#f0f0f0] hover:bg-[#f5f5f5] cursor-pointer" @click="open">
          <svg-icon icon-class="gaojisousuo" />
        </div>
      </VGroup>
    </template>
    <template #dropdown>
      <div class="w-[380px] h-80 p-3 border rounded-md shadow-gray-100 shadow-sm">
        <el-input v-model="textarea" :rows="12" placeholder="一行一个(最多支持200行)" type="textarea" />
        <div class="mt-[8px] flex justify-between">
          <div>
            <el-button size="small" @click="handleClear">清空</el-button>
          </div>
          <div>
            <el-button size="small" @click="handleCancel">关闭</el-button>
            <el-button size="small" type="primary" @click="handleConfirm">搜索</el-button>
          </div>
        </div>
      </div>
    </template>
  </vxe-pulldown>
</template>
<script setup>

const props = defineProps({
  modelValue: { type: String, default: () => '' },
})

const emit = defineEmits(["update:modelValue", "search"])
const showPull = ref(false)
const textarea = ref(null)

const inputValue = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

const open = () => {
  showPull.value = !showPull.value;
  textarea.value = inputValue.value?.replaceAll(',', '\n') || ''
}
const close = () => {
  showPull.value = false
}
//关闭
const handleCancel = () => {
  textarea.value = null
  close()
};
//清空
const handleClear = () => {
  inputValue.value = null
  textarea.value = null
};

//确认
const handleConfirm = () => {
  inputValue.value = textarea.value?.split('\n').filter(Boolean).join(',') || ''
  emit("search")
  close()
};
</script>
